// 渲染页面
let pageArr = [5, 6, 7, 8, 9, 10];
let count = pageArr[0];
var pages = 1;
let maxPage;
function getData() {
    $.ajax({
        url: '/between/huoqu',
        data: {
            count: count,
            page: pages
        },
        success: (res) => {
            if (res.error) {
                console.log(res.error)
                // console.log(pages, 'x');
            } else {
                // 表格渲染
                $('tbody').html('');
                $(res.data).each((index, item) => { //i（index）是每一项的起始下标;v（item）是每一项
                    $('tbody').append(`
                        <tr data-id="${item.b_id}">
                        <td>${item.b_id}</td>
                        <td>${item.b_Tid}</td>
                        <td>${item.b_name}</td>   
                        <td>${item.b_title}</td>
                        <td>${item.b_wage}</td>
                        <td>${item.b_fund}</td>
                        <td>${item.b_Fproportion}</td>
                        <td>${item.b_five}</td>
                        <td>${item.b_unemployment}</td>
                        <td>${item.b_industrial}</td>
                        <td>${item.b_fertility}</td>
                        <td>${item.b_medical}</td>
                        <td>${item.b_endowment}</td>
                        <td>
                            <button class="edit_del delete"><span class="iconfont icon-lajitong"></span>删除</button> 
                        </td>
                        </tr>
                    `)
                })
                // console.log(pages);
                $('.pagination').html(`
                    <li id='page_left'>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li id='page_right'>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                
                `)
                //渲染页码
                //渲染页码（上一页和下一页）之前的长度是res.data.length,渲染之后是res.total
                maxPage = Math.ceil(res.total / count);
                for (let i = 1; i <= maxPage; i++) {
                    $('#page_right').before(`
                                <li clsaa='new_page'><a href="#" id='a'>${i}</a></li>
                            `)
                    if (pages == i) {
                        $('.new_page').eq(i - 1).toggleClass('active');
                    }
                }
            }
        }
    });
};
getData();
$('.pull-right').on('click', '#a', function () {
    pages = $(this).text();
    console.log($(this));
})
// 点击页码实现跳转
$('.pull-right').on('click', 'a', function () {
    console.log(123);
    page = $(this).text();
    getData();
    console.log(pages);
});

// 点击上一页实现跳转
$('.pagination').on('click', '#page_left', function () {
    pages > 1 ? pages-- : pages = 1;
    $('.new_page').eq(pages - 1).toggleClass("active");
    getData();
});

// 点击下一页实现跳转
$('.pagination').on('click', '#page_right', function () {
    pages < maxPage ? pages++ : pages = maxPage;
    $('.new_page').eq(pages - 1).toggleClass("active");
    getData();
});
// 渲染每页显示的条数
function getNum(pageArr) {
    pageArr.forEach(item => {
        $('.dropdown-menu').append(`
            <li data_num="${item}">
                <a href="#">每页显示${item}条</a>
            </li>
        `)
    })
};
getNum(pageArr);
// 点击页码显示条数
$('.dropdown-menu').on('click', 'li', function () {
    count = parseInt($(this).attr('data_num'));
    getData();
    $('.dropdown-menu').prev().html(`当前页显示${count}条`);
});

// 删除数据 confirm删除弹框
$('tbody').on('click', '.delete', function () {
    if (confirm('是否确定删除？')) {
        $.ajax({
            url: '/salary/shanchu',
            method: 'post',
            data: {
                id: $('.edit_del').parents('tr').attr('data-id')
            },
            success: (res) => {
                if (res.error) {
                    console.log(res.msg);
                } else {
                    alert('删除成功');
                    getData();
                }
            }
        })
    }
});

// 查询
$('.inquire').click(() => {
    console.log($('.planId').val());
    console.log($('.planName').val());
    console.log($('.select').val());
    $.ajax({
        url: '/between/chaxun1',
        method: 'post',
        data: {
            id: $('.planId').val(),
            name: $('.planName').val(),
            wage: $('.select').val()
        },
        success: (res) => {
            if (res.error) {
                console.log(res.error)
                // console.log(pages, 'x');
            } else {
                // 表格渲染
                $('tbody').html('');
                $(res.data).each((index, item) => { //i（index）是每一项的起始下标;v（item）是每一项
                    $('tbody').append(`
                        <tr data-id="${item.b_id}">
                        <td>${item.b_id}</td>
                        <td>${item.b_Tid}</td>
                        <td>${item.b_name}</td>   
                        <td>${item.b_title}</td>
                        <td>${item.b_wage}</td>
                        <td>${item.b_fund}</td>
                        <td>${item.b_Fproportion}</td>
                        <td>${item.b_five}</td>
                        <td>${item.b_unemployment}</td>
                        <td>${item.b_industrial}</td>
                        <td>${item.b_fertility}</td>
                        <td>${item.b_medical}</td>
                        <td>${item.b_endowment}</td>
                        <td>
                            <button class="edit_del delete"><span class="iconfont icon-lajitong"></span>删除</button> 
                        </td>
                        </tr>
                    `)
                })
                // console.log(pages);
                $('.pagination').html(`
                    <li id='page_left'>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li id='page_right'>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                
                `)
                //渲染页码
                //渲染页码（上一页和下一页）之前的长度是res.data.length,渲染之后是res.total
                maxPage = Math.ceil(res.total / count);
                for (let i = 1; i <= maxPage; i++) {
                    $('#page_right').before(`
                                <li clsaa='new_page'><a href="#" id='a'>${i}</a></li>
                            `)
                    if (pages == i) {
                        $('.new_page').eq(i - 1).toggleClass('active');
                    }
                }
            }
        }
    })
});

//重置
$('.reset').click(() => {
    $('.planId').val('')
    $('.planName').val('')
    $('.select').val('')
    getData();
})